/**
 * 学习目标：使用 NavLink 实现高亮效果
 * 
 * ### Link与NavLink 

`Link`组件最终会渲染成a标签，用于指定路由导航

+ to属性，将来会渲染成a标签的href属性
+ `Link`组件无法实现导航的高亮效果

`NavLink`组件，一个更特殊的`Link`组件，可以用用于指定当前导航高亮

+ to属性，用于指定地址，会渲染成a标签的href属性
+ activeClassName: 用于指定高亮的类名，默认`active`
+ exact: 精确匹配，表示必须精确匹配类名才生效



注意：

1. 👍 推荐： 使用LInk NavLink替代a标签.
   1. `Link`  `NavLink` 会根据路由模式，自动判断是否加#。
   2. a标签不会。
 */
import React, { Component } from 'react'
// 1. 下包 react-router-dom@5.3
// 2. 导入组件： HashRouter, Route, Link
import { HashRouter, Route, Link, BrowserRouter as Router, NavLink } from 'react-router-dom';

// 引入样式
import './index.css'

export default class App extends Component {

    render() {
        return (
            // 3. 使用Router包住所有的代码
            <Router>
                <div>
                    <h1>app组件</h1>
                    {/* 首页 */}
                    <Link to="/home">首页</Link>
                    <div>
                        {/* 5. 使用Link组件，to属性去跳转 💥一般开头带上/ */}
                        <NavLink activeClassName='my-active' to="/home">跳到Home</NavLink>
                        <br />
                        <NavLink activeClassName='my-active' to="/my">跳到我的音乐</NavLink>
                        <br />
                        <NavLink activeClassName='my-active' to="/friend">跳到朋友</NavLink>
                    </div>
                    {/* 4. 使用Route组件，指定路径与组件之前的对应关系 */}
                    <Route path="/home" component={Home} />
                    <Route path="/my" component={MyMusic} />
                    <Route path="/friend" component={Friend} />
                </div>
            </Router>
        )
    }
}
// 0. 创建子组件
function Home() {
    return <div>home</div>
}
function MyMusic() {
    return <div>MyMusic</div>
}
function Friend() {
    return <div>Friend</div>
}